<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">测试ajax封装</button>
  <script>
    /* 
    封装一个GET类型AJAX请求函数
    XHR + promise
    内部使用xhr发异步ajax请求, 返回一个promise对象
    */
    function ajax(url) {
      return new Promise((resolve, reject) => {
        // 1. 创建xhr
        const xhr = new XMLHttpRequest()
        // 2. 初始化
        xhr.open('GET', url)
        // 3. 绑定监听
        xhr.onreadystatechange = () => {
          console.log('onreadystatechange()')

          if (xhr.readyState!=4) return

          if (xhr.status>=200 && xhr.status<300) {
            // 成功的value指定为响应体json数据对应的js对象/数组
            resolve(JSON.parse(xhr.responseText))
          } else { // 如果失败了, 将promise更新失败的状态, 并指定reason
            // 失败的reason指定为包含状态码的提示文本的error对象
            reject(new Error(`请求失败 status=${xhr.status}`))
          }
        }
        // 4. 发送请求
        xhr.send()
      })
    }


    document.getElementById('btn').onclick = () => {
      const p = ajax('http://localhost:3000/movie2?q=飞')
      p.then(
        result => console.log('请求成功的数据', result),
        error => alert(error.message)
      )
    }

  </script>
</body>
</html>